<script setup lang="ts">
import searchContainer from './components/search_container.vue'
import DeptTree from './components/dept_tree.vue'
import UserTable from './components/user_table.vue'
import { onBeforeMount, onMounted } from 'vue';
import { ElRow,ElCol } from 'element-plus';
import { useRouter } from 'vue-router';

const router=useRouter();
console.log('router.getRoutes() =',router.getRoutes());


//todo: unfinished

onBeforeMount(async () => {})
onMounted(async () => {})
</script>
<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!-- 部门树 -->
            <el-col :lg="4" :xs="24" class="mb-[12px]">
                <dept-tree />
            </el-col>

            <!-- 用户列表 -->
            <el-col :lg="20" :xs="24">
                <searchContainer />
                <UserTable />
            </el-col>
        </el-row>
       
    </div>
</template>
<style lang="scss" scoped>
.app-container{
    // width: 100%;
    //20px 是上面的gutter 20
    width:  calc( 100% - 20px )
}
</style>